<template>
  <div class="home">
    <el-container>
      <!--侧边栏-->
      <el-aside width="200" @mouseleave.native="toggleLeave" @mouseenter.native="toggleDown">
        <!--菜单-->
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :collapse-transition="false"
          unique-opened
          router
          text-color="#fff"
          active-text-color="#E47833"
          background-color="#29bdd9"
          :default-active="$route.path || '/Welcome'"
        >
          <el-submenu :index="item.path" v-if="item.children" v-for="item in sideMenu">
            <template slot="title">
              <i :class="'iconfont '+item.meta.icon"></i>
              <span slot="title">{{item.meta.name}}</span>
            </template>

            <el-menu-item :index="'/'+item.path+'/'+item2.path" v-for="item2 in item.children">
              <template slot="title">
                <!-- 图标 -->
                <i :class="'iconfont '+item2.meta.icon"></i>
                <!-- 文本 -->
                <span>{{item2.meta.name}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="'/'+item.path">
            <!-- 图标 -->
            <i :class="'iconfont '+item.meta.icon"></i>
            <!-- 文本 -->
            <span>{{item.meta.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 顶部区域-->
        <el-header>
          <el-row>
            <!-- 顶部标题-->
            <el-col :span="6">
              <div class="title">网站后台页面展示</div>
            </el-col>
            <!-- 顶部搜索-->
            <el-col :span="8 " class="Search__col">
              <div class="Search">
                <el-input placeholder="请输入查询的模块" class="input-with-select" size="small">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
            </el-col>
            <!--用户资料-->
            <el-col :span="6" class="user__header">
              <i class="iconfont icon-yonghu"></i>
              <i class="user__header--Words">：{{nickname}}</i>
            </el-col>
            <!-- 顶部退出-->
            <el-col :span="4" class="Quit__col">
              <div class="Quit" @click="quit">
                <i class="el-icon-switch-button"></i>
                <p class="Quit--Words">退出系统</p>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <!--面包屑导航-->
              <el-breadcrumb separator="/">
                <el-breadcrumb-item
                  :to="{ path: item.path || '/welcome'}"
                  v-for="item in crumb"
                >{{item.meta.name || "首页"}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <router-view></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      isCollapse: true,
      nickname: ''
    }
  },
  created () {
    this.nickname = window.sessionStorage.getItem('nickname')
  },
  computed: {
    ...mapState(['sideMenu', 'crumb'])
  },
  methods: {
    toggleLeave () {
      this.isCollapse = true
    },
    toggleDown () {
      this.isCollapse = false
    },
    quit () {
      localStorage.removeItem('token')
      this.$store.commit('CLEAR_SIDEMENU')
      this.$router.push('/login')
      window.location.reload()
    }
  }
}
</script>
<style lang="less" scoped>
i {
  color: #fff;
}
.user__header--icon {
  font-size: 24px;
  vertical-align: middle;
}
.user__header--Words {
  font-size: 14px;
  vertical-align: middle;
}
.user__header {
  line-height: 60px;
  color: #fff;
  text-align: right;
}
.el-menu span {
  margin-left: 10px;
}
.Search__col {
  text-align: left;
  height: 60px;
}
.Search {
  line-height: 50px;
}
.el-input {
  width: 300px;
}
.title {
  font-size: 17px;
  color: #fff;
  line-height: 60px;
  letter-spacing: 1px;
  font-family: "Microsoft Yahei";
  text-align: left;
  font-weight: 500;
}
.Quit__col {
  height: 60px;
}
.Quit {
  float: right;
  height: 60px;
  color: #fff;
}
.el-icon-switch-button {
  font-size: 20px;
}
.Quit--Words {
  font-size: 13px;
}
.el-header {
  position: relative;
  background-image: linear-gradient(-90deg, #29bdd9 0%, #9d14e4 100%);
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  height: 60px;
}

.el-aside {
  text-align: center;
  line-height: 260px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
body > .el-container {
  margin-bottom: 40px;
  height: 100%;
  padding: 0;
  margin: 0;
  width: 100%;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  height: 100%;
  background: #29bdd9;
  text-align: left;
}
</style>
